<template>
  <!-- StorageManage库存管理 -->
  <div style="position: relative;">
    <el-card style="height: calc( 100vh - 85px); overflow:auto; ">
      <!-- 信息搜索框 -->
      <el-form v-model="queryObj" label-width="100px" size="large">
        <el-row>
          <el-col :span="7" style="margin-right:15px">
            <el-form-item label="货位地址：">
              <el-input v-model.trim="queryObj.locName" placeholder="请输入货位地址" />
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-right:15px">
            <el-form-item label="拥有者：">
              <el-input v-model.trim="queryObj.owner" placeholder="请输入拥有者" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="物料编码：">
              <el-input v-model.trim="queryObj.skuNo" placeholder="请输入物料编码" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="等级：">
              <el-input v-model.trim="queryObj.level" placeholder="请输入等级" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="条码号：">
              <el-input v-model.trim="queryObj.unitId" placeholder="请输入条码号" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="机种：">
              <el-input v-model.trim="queryObj.deviceType" placeholder="请输入箱机种" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="满栈板数：">
              <el-input v-model.trim="queryObj.fullNum" placeholder="请输入满栈板数" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="更新状态：">
              <el-select v-model="queryObj.updateStatus" clearable placeholder="请选择更新状态">
                <el-option label="1" :value="1" />
                <el-option label="2" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="箱尺寸：">
              <el-input v-model.trim="queryObj.unitSize" placeholder="请输入箱尺寸" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="库存状态：">
              <el-input v-model.trim="queryObj.stockStatus" placeholder="请输入库存状态" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="是否满箱：">
              <el-select v-model="queryObj.isFull" clearable placeholder="请选择是否满箱">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="货物数量：">
              <el-input v-model.trim="queryObj.totalNum" placeholder="请输入货物数量" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px;">
            <el-form-item label="时间：">
              <el-date-picker v-model="timestart_end" style="width:100%" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy/MM/dd HH:mm:ss"
                value-format="yyyy/MM/dd HH:mm:ss" @change="handleDataChanged" range-separator="至" :default-time="['00:00:00', '23:59:59']" />
            </el-form-item>
          </el-col>
          <searchbutton :isopen="isopen" @isopenclickfn="isopenclick" @resetQueryfn="resetQuery" @queryClickfn="queryClick" />

        </el-row>

      </el-form>
      <!-- 调整状态按钮 -->
      <el-row style="margin-bottom:10px">
        <div style="float:left">
          <el-button v-permission="'StorageManage-OutBound'" type="primary" plain @click="OutBoundClick"><i class="iconfont el-icon-chukuguanli" style="font-size:14px" /> 出库</el-button>
          <!-- <el-button v-permission="'StorageManage-urgencyOutBound'" type="primary" plain @click="urgencyOutBoundClick"><i class="iconfont el-icon-jinji" style="font-size:14px" /> 紧急出库</el-button>
          <el-button v-permission="'StorageManage-Check'" type="primary" plain @click="CheckClick"><i class="iconfont el-icon-navicon-pdd" style="font-size:14px" /> 盘点</el-button> -->
          <!-- <el-button v-permission="'StorageManage-Check'" type="primary" plain @click="Specialselection"><i class="iconfont el-icon-navicon-pdd" style="font-size:14px" /> 特殊拣选</el-button> -->
        </div>
        <!-- 右侧公用按钮功能 -->
        <div style="float:right">
          <div style="font-size:30px;display: inline-block;margin-right:5px">
            <a href="#">
              <el-tooltip class="item" effect="dark" content="列位置" placement="top" style="cursor:pointer">
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-grid el-icon--right" style="font-size:24px;color:black" />
                  </span>
                  <el-dropdown-menu slot="dropdown" style=" width:190px;height:300px;overflow:auto">
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islocName">货位地址</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isowner">拥有者</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isskuNo">物料编码</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islevel">等级</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isamount">数量</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isunitId">条码号</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isdeviceType">机种</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isfullNum">满栈板数</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isupdateStatus">更新状态</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isunitSize">箱尺寸</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isstockStatus">库存状态</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isisFull">箱子是否满箱</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.istotalNum">箱子里货物数量</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.iscreatedTime">创建时间</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islastUpdateTime">最后更新时间</el-checkbox></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-tooltip>
            </a>
          </div>
          <!-- 右侧公用按钮功能组件 -->
          <functionButton style="float:right" :refresh-click="refreshClick" :table-data="tableData" :table-data-all="tableDataAll" :headers-arr="headersArr" :headers-relations="headersRelations"
            @exportAllfn="exportAll" />
        </div>
      </el-row>
      <!-- 任务总表 -->
      <el-table v-if="tableData.taskId !== ''" ref="mainTable" v-loading="listLoading" :data="tableData" border :row-style="{height:'40px'}" :cell-style="{padding:'0px'}"
        style="width: 100%;  margin-bottom: 10px;overflow:auto;">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column fixed="left" width="60" align="center">
          <template slot-scope="scopedata">
            <el-button v-permission="'StorageManage-MoveLoc'" type="text" size="small" @click="MoveLocClick(scopedata.row)">移库</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="deleteCell.islocName" prop="locName" label="货位地址" width="120" show-overflow-tooltip align="center" />
        <el-table-column v-if="deleteCell.isowner" prop="owner" label="拥有者" width="120" align="center" />
        <el-table-column v-if="deleteCell.isskuNo" prop="skuNo" label="物料编码" width="120" align="center" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.islevel" prop="level" label="等级" width="100" align="center" />
        <el-table-column v-if="deleteCell.isamount" prop="amount" label="数量" width="80" align="center" />
        <el-table-column v-if="deleteCell.isunitId" prop="unitId" label="条码号" width="180" />
        <el-table-column v-if="deleteCell.isdeviceType" prop="deviceType" label="机种" width="120" align="center" />
        <el-table-column v-if="deleteCell.isfullNum" prop="fullNum" label="满栈板数" width="100" show-overflow-tooltip align="center" />
        <el-table-column v-if="deleteCell.isupdateStatus" prop="updateStatus" label="更新状态" width="100" show-overflow-tooltip align="center" />
        <el-table-column v-if="deleteCell.isunitSize" prop="unitSize" label="箱尺寸" width="100" align="center" />
        <el-table-column v-if="deleteCell.isstockStatus" prop="stockStatus" label="库存状态" width="100" align="center" />
        <el-table-column v-if="deleteCell.isisFull" prop="isFull" label="是否满箱" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.isFull }}
          </template>
        </el-table-column>
        <el-table-column v-if="deleteCell.istotalNum" prop="totalNum" label="货物数量" width="80" align="center" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.iscreatedTime" prop="createdTime" label="创建时间" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.createdTime | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="deleteCell.islastUpdateTime" prop="lastUpdateTime" label="最后更新时间" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.lastUpdateTime | formatDate }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <paging :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />

    </el-card>
    <!-- 出库按钮的dialog -->
    <el-dialog v-el-drag-dialog :visible.sync="OutBoundDialog" :title="dialogTitle" width="30%" :close-on-click-modal="false" top="5vh">
      <el-form ref="BoundForm" :model="BoundForm" size="mini" :rules="rules">
        <el-form-item label="目的地：" prop="fromLoc">
          <el-select v-model="BoundForm.toloc" placeholder="请输入目的地">
            <el-option v-for="item in OutBoundForm" :key="item.configKey" :value="item.configKey" :label="item.configValue" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getToLocClick">确 定</el-button>
        <el-button @click="OutBoundDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 移库按钮的dialog -->
    <el-dialog v-el-drag-dialog :visible.sync="MoveLocDialog" title="移库任务" width="30%" :close-on-click-modal="false" top="5vh" :before-close="handleClose">
      <el-form ref="moveTask" :model="moveTask" size="mini" :rules="rules">
        <el-form-item label="目的点：" prop="toLoc" label-width="80px">
          <el-input v-model.trim="moveTask.toLoc" placeholder="请输入目的点" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="moveTaskClick">确 定</el-button>
        <el-button @click="MoveLocDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetWmsStockApi,
  CreateOutboundOrderApi,
  CreateInventoryOrderApi,
  CreateOutboundTaskApi,
  CreatelocMoveTaskApi,
  CreateOutboundOrderSApi,
} from "@/api/LocInnerManageApi";
import permission from "@/permission/index.js"; // 权限判断指令
import elDragDialog from "@/components/el-drag-dialog"; // base on element-ui
import { GetMsgInfoApi } from "@/api/common";
import { Message } from "element-ui";
export default {
  name: "StorageManage",
  directives: { permission, elDragDialog },
  data() {
    return {
      queryObj: {
        locName: "", // 货位地址
        owner: "", // 拥有者
        skuNo: "", // 物料编码
        level: "", // 等级
        unitId: "", // 条码号
        deviceType: "", // 机种
        fullNum: null, // 满栈板数
        updateStatus: null, // 更新状态
        unitSize: "", // 箱尺寸
        stockStatus: null, // 库存状态
        isFull: null, // 箱子是否满箱
        totalNum: null, // 箱子里货物数量
        page: 0, // 第几页
        size: 0, // 每页条数
        startTime: "0001/1/1 0:00:00", // 开始日期
        endTime: "0001/1/1 0:00:00", // 结束日期
      },
      // 分页页码数据
      pagionObj: {
        size: 10,
        currentPage: 1,
        total: 100,
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 时间的数据
      timestart_end: [],
      isopen: false,
      // loding效果显示
      listLoading: true,
      // 列位置 数据
      deleteCell: {
        islocName: true,
        isowner: true,
        isskuNo: true,
        islevel: true,
        isamount: true,
        isunitId: true,
        isdeviceType: true,
        isfullNum: true,
        isupdateStatus: true,
        isunitSize: true,
        isstockStatus: true,
        isisFull: true,
        istotalNum: true,
        iscreatedTime: true,
        islastUpdateTime: true,
      },
      // MoveLocDialog是否显示
      MoveLocDialog: false,
      // 出库按钮的dialog是否显示
      OutBoundDialog: false,
      // 创建任务的数据
      moveTask: {
        taskType: "手动任务", // 任务类型
        fromLoc: "010606", // 起始点
        toLoc: "", // 目的点
        unitId: "TP005218", // 容器编号
      },
      // 表单校验数据
      rules: {
        taskType: [
          { required: true, message: "请选择任务类型", trigger: "blur" },
        ],
        fromLoc: [{ required: true, message: "请选择起始点", trigger: "blur" }],
        toLoc: [{ required: true, message: "请选择目的点", trigger: "blur" }],
        unitId: [
          { required: true, message: "条码号不能为空", trigger: "change" },
        ],
      },
      // 出库按钮的选择
      OutBoundForm: [],
      // 按钮任务 目的地
      BoundForm: {
        toloc: "",
      },
      // dialog名
      dialogTitle: "出库任务",
      // 当前行的数据
      rowData: {},
      // excel 数据的key 表头数据
      headersArr: [
        "货位地址",
        "拥有者",
        "物料编码",
        "等级",
        "数量",
        "条码号",
        "机种",
        "满栈板数",
        "更新状态",
        "箱尺寸",
        "库存状态",
        "是否满箱",
        "货物数量",
        "创建时间",
        "最后更新时间",
      ],
      // 将表头转换成中文
      headersRelations: {
        货位地址: "locName",
        拥有者: "owner",
        物料编码: "skuNo",
        等级: "level",
        数量: "amount",
        条码号: "unitId",
        机种: "deviceType",
        满栈板数: "fullNum",
        更新状态: "updateStatus",
        箱尺寸: "unitSize",
        库存状态: "stockStatus",
        是否满箱: "isFull",
        货物数量: "totalNum",
        创建时间: "createdTime",
        最后更新时间: "lastUpdateTime",
      },
    };
  },
  mounted() {
    this.queryData();
  },

  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true;
      this.queryObj.size = this.pagionObj.size;
      this.queryObj.page = this.pagionObj.currentPage;
      const res = await GetWmsStockApi(this.queryObj);
      this.tableData = res.data.data;
      this.pagionObj.pageCount = res.data.pageCount;
      this.pagionObj.total = res.data.count;
      this.listLoading = false;
    },
    // 获取dialog为出库任务时select的数据
    async GetMsgInfo() {
      let res = {};
      if (this.dialogTitle === "出库任务") {
        res = await GetMsgInfoApi("OutOrderDest");
        // console.log('出库任务的目的地')
      } else if (this.dialogTitle === "盘点任务") {
        res = await GetMsgInfoApi("InventoryOrderDest");
        // console.log('盘点任务的目的地')
      } else if (this.dialogTitle === "紧急出库任务") {
        res = await GetMsgInfoApi("OutTaskDest");
        console.log("紧急出库的选择");
      }
      // else if (this.dialogTitle === '特殊拣选任务') {
      //   res = await GetMsgInfoApi('OutTaskDest')
      //   console.log('特殊拣选的选择')
      // }
      // console.log(res)
      this.OutBoundForm = res.data.data;
      // console.log(this.OutBoundForm)
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1;
      this.queryData();
    },
    // 刷新按钮
    refreshClick() {
      this.listLoading = true;
      this.queryData();
      this.listLoading = false;
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val;
      this.queryData();
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val;
      this.queryData();
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen;
    },
    // 重置按钮
    resetQuery() {
      this.queryObj.locName = ""; // 货位地址
      this.queryObj.owner = ""; // 拥有者
      this.queryObj.skuNo = ""; // 物料编码
      this.queryObj.level = null; // 等级
      this.queryObj.unitId = ""; // 条码号
      this.queryObj.deviceType = ""; // 机种
      this.queryObj.fullNum = null; // 满栈板数
      this.queryObj.updateStatus = null; // 更新状态
      this.queryObj.unitSize = ""; // 箱尺寸
      this.queryObj.stockStatus = null; // 库存状态
      this.queryObj.isFull = null; // 箱子是否满箱
      this.queryObj.totalNum = null; // 箱子里货物数量
      this.timestart_end = [];
    },
    // 移库按钮
    async MoveLocClick(data) {
      this.moveTask.toLoc = "";
      this.MoveLocDialog = true;
      this.rowData = data;
      // 获取表格被选中的数据
      // console.log(this.$refs.mainTable.selection)
    },
    // 移库按钮的确认按钮
    async moveTaskClick() {
      console.log({ toLoc: this.moveTask.toLoc, stocks: this.rowData });
      await CreatelocMoveTaskApi({
        toLoc: this.moveTask.toLoc,
        stock: this.rowData,
      });
      Message.success("移库成功");
      this.MoveLocDialog = false;
    },

    // 出库按钮
    OutBoundClick() {
      this.BoundForm.toloc = "";
      this.dialogTitle = "出库任务";
      this.GetMsgInfo();
      if (this.$refs.mainTable.selection.length === 0) {
        Message.warning("请选择货物");
        return;
      }
      this.OutBoundDialog = true;
      // 获取表格被选中的数据
      console.log(this.$refs.mainTable.selection);
    },
    // 盘点按钮
    CheckClick() {
      this.BoundForm.toloc = "";
      this.dialogTitle = "盘点任务";
      this.GetMsgInfo();
      if (this.$refs.mainTable.selection.length === 0) {
        Message.warning("请选择货物");
        return;
      }
      this.OutBoundDialog = true;
      // 获取表格被选中的数据
      console.log(this.$refs.mainTable.selection);
    },
    // 紧急出库按钮
    urgencyOutBoundClick() {
      this.BoundForm.toloc = "";
      this.dialogTitle = "紧急出库任务";
      this.GetMsgInfo();
      if (this.$refs.mainTable.selection.length === 0) {
        Message.warning("请选择货物");
        return;
      }
      this.OutBoundDialog = true;
      // 获取表格被选中的数据
      console.log(this.$refs.mainTable.selection);
    },
    // 出库、盘点、紧急出库dialog的确认按钮
    async getToLocClick() {
      if (this.BoundForm.toloc) {
        // console.log(this.OutBoundForm.getToLoc)
        const data = {
          toLoc: this.BoundForm.toloc,
          stocks: this.$refs.mainTable.selection,
        };
        console.log(data, "目的地");
        if (this.dialogTitle === "出库任务") {
          await CreateOutboundOrderApi(data);
          console.log("出库任务完成");
        } else if (this.dialogTitle === "盘点任务") {
          await CreateInventoryOrderApi(data);
          console.log("盘点任务完成");
        } else if (this.dialogTitle === "紧急出库任务") {
          await CreateOutboundTaskApi(data);
          console.log("紧急出库任务完成");
        }
        // console.log(res)
        Message.success("操作成功");
        this.OutBoundDialog = false;
        this.BoundForm.toloc = "";
        this.queryData();
      }
    },

    // 关闭创建任务dialog
    handleClose() {
      this.MoveLocDialog = false;
      // this.moveTask.taskType = ''
      this.moveTask.unitId = "";
    },
    // excel导出全部
    async exportAll() {
      const res2 = await GetWmsStockApi({ size: 10000 });
      this.tableDataAll = res2.data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

